<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="550" height="400"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// --- Helper Functions ---
function drawLamp(ctx, x, y_top, y_bottom, radius) {
    // Vertical wire
    ctx.beginPath();
    ctx.moveTo(x, y_top);
    ctx.lineTo(x, y_bottom);
    ctx.stroke();

    // Lamp circle
    const y_center = (y_top + y_bottom) / 2;
    ctx.beginPath();
    ctx.arc(x, y_center, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Lamp cross
    const d = radius / Math.sqrt(2);
    ctx.beginPath();
    ctx.moveTo(x - d, y_center - d);
    ctx.lineTo(x + d, y_center + d);
    ctx.moveTo(x - d, y_center + d);
    ctx.lineTo(x + d, y_center - d);
    ctx.stroke();
}

function drawDot(ctx, x, y, radius = 3) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
}

// --- Main Drawing ---

// Style setup
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'black';

// Text
ctx.font = '18px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('Fig. 8.1 shows 3 lamps and a fuse connected to a power supply.', 20, 20);

ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('Fig. 8.1', 275, 360);

// Circuit Coordinates
const y_top = 120;
const y_bottom = 280;
const x_term = 50;
const x_fuse_start = 100;
const x_fuse_end = 160;
const x_lamp1 = 230;
const x_lamp2 = 330;
const x_lamp3 = 430;
const lamp_radius = 20;
const terminal_radius = 5;

// Wires
// Top wire section 1 (to fuse)
ctx.beginPath();
ctx.moveTo(x_term, y_top);
ctx.lineTo(x_fuse_start, y_top);
ctx.stroke();
// Top wire section 2 (bus bar)
ctx.beginPath();
ctx.moveTo(x_fuse_end, y_top);
ctx.lineTo(x_lamp3, y_top);
ctx.stroke();
// Bottom wire (bus bar)
ctx.beginPath();
ctx.moveTo(x_term, y_bottom);
ctx.lineTo(x_lamp3, y_bottom);
ctx.stroke();

// Power Supply Terminals
ctx.beginPath();
ctx.arc(x_term, y_top, terminal_radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(x_term, y_bottom, terminal_radius, 0, 2 * Math.PI);
ctx.stroke();

// Voltage Label
ctx.font = '16px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('220 V', x_term + 20, (y_top + y_bottom) / 2);

// Fuse
ctx.beginPath();
ctx.rect(x_fuse_start, y_top - 8, x_fuse_end - x_fuse_start, 16);
ctx.stroke();
// Line through fuse
ctx.beginPath();
ctx.moveTo(x_fuse_start, y_top);
ctx.lineTo(x_fuse_end, y_top);
ctx.stroke();

// Lamps
drawLamp(ctx, x_lamp1, y_top, y_bottom, lamp_radius);
drawLamp(ctx, x_lamp2, y_top, y_bottom, lamp_radius);
drawLamp(ctx, x_lamp3, y_top, y_bottom, lamp_radius);

// Junction Dots
const dot_radius = 2.5;
drawDot(ctx, x_fuse_end, y_top, dot_radius);
drawDot(ctx, x_lamp1, y_top, dot_radius);
drawDot(ctx, x_lamp1, y_bottom, dot_radius);
drawDot(ctx, x_lamp2, y_top, dot_radius);
drawDot(ctx, x_lamp2, y_bottom, dot_radius);
drawDot(ctx, x_lamp3, y_top, dot_radius);
drawDot(ctx, x_lamp3, y_bottom, dot_radius);
</script>
</body>
</html>